import 'package:flutter/material.dart';
import 'package:kq_flutter_core_widget/utils/kq_screen_util.dart';
import 'package:get/get.dart';
import 'package:kq_flutter_tv_widgets/resources/kq_theme_colors.dart';
import 'package:kq_flutter_tv_widgets/widgets/overflowBox/kq_over_flow_box.dart';

class KqOverFlowBoxPage extends StatefulWidget {
  const KqOverFlowBoxPage({super.key});

  @override
  State<KqOverFlowBoxPage> createState() => _KqOverFlowBoxPageState();
}

class _KqOverFlowBoxPageState extends State<KqOverFlowBoxPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Text('位置在右下角'),
          KqOverFlowBox(
              position: BoxToReferencePosition.bottom,
              referenceWidget: Container(
                width: KqScreenUtil().screenWidth,
                height: 50,
                color: KqThemeColors.bgBlack50,
              ),
              visible: true,
              alignment: Alignment.topRight,
              overflowBoxWidget: Container(
                color: Colors.black38,
                width: 40.r,
                height: 40.r,
              ),
              maxWidth: 40.r,
              maxHeight: 40.r),
          const Text('位置在左下角'),
          KqOverFlowBox(
              position: BoxToReferencePosition.bottom,
              referenceWidget: Container(
                width: KqScreenUtil().screenWidth,
                height: 50,
                color: KqThemeColors.bgBlue,
              ),
              visible: true,
              alignment: Alignment.topLeft,
              overflowBoxWidget: Container(
                color: Colors.black38,
                width: 40.r,
                height: 40.r,
              ),
              maxWidth: 40.r,
              maxHeight: 40.r),
          const SizedBox(
            height: 20,
          ),
          const Text('位置在右中心'),
          KqOverFlowBox(
              position: BoxToReferencePosition.center,
              referenceWidget: Container(
                width: KqScreenUtil().screenWidth,
                height: 50,
                color: KqThemeColors.bgBlack50,
              ),
              visible: true,
              margin: const EdgeInsets.only(right: 10),
              alignment: Alignment.centerRight,
              overflowBoxWidget: Container(
                color: Colors.black38,
                width: 40.r,
                height: 40.r,
              ),
              maxWidth: 40.r,
              maxHeight: 40.r),
          const Text('通过margin设置位置在中心偏下'),
          KqOverFlowBox(
              position: BoxToReferencePosition.center,
              referenceWidget: Container(
                width: KqScreenUtil().screenWidth,
                height: 50,
                color: KqThemeColors.bgBlack50,
              ),
              visible: true,
              margin: const EdgeInsets.only(top: 30),
              alignment: Alignment.center,
              overflowBoxWidget: Container(
                color: Colors.black38,
                width: 40.r,
                height: 40.r,
              ),
              maxWidth: 40.r,
              maxHeight: 40.r)
        ],
      ),
    );
  }
}
